<template>
    <!-- 附件列表 -->
    <div class="fileList-box">
        <el-drawer :title="`${selectObj.name}附件清单(${fList.length})`" size="40%" :visible.sync="fileListShow" @close="closeDrawer">
            <div class="fList">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="(f,index) in fList" :key="index" :label="f">
                        <p>{{f.name}}</p>
                        <a :href="f.url">
                            <svg-icon icon-class="download"/>
                        </a>
                    </el-checkbox>
                </el-checkbox-group>

                <SubBtn>
                    <template slot="btn">
                        <el-checkbox v-model="allChecked" @change="isAllChange">全选</el-checkbox>
                        <el-button round @click="batchDown">下载附件</el-button>
                    </template>
                </SubBtn>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import SubBtn from "@/components/subBtn/subBtn.vue";
import {getServiceTaskFileListApi} from "@/BMViews/api/service/taskFile.js"
export default {
    name: 'fileList',
    components:{SubBtn},
    props:{
        //当前选中的一条目标数据
        selectObj:{
            type: Object,
            default: ()=>{
                return {}
            }
        }
    },
    data(){
        return{
            fileListShow: false,//附件显示隐藏.
            fList:[],// 文件列表
            checkList: [],//选择的文件
            allChecked: false,//全选
        }
    },
    mounted(){

    },
    watch:{
        checkList:{
            handler(){
                // 如果已选的和文件列表长度一样，就是全选
                if(this.checkList.length == this.fList.length){
                    this.allChecked = true
                }else{
                    this.allChecked = false
                }
            },
        }
    },
    methods:{
        // 获取当前选择的这个任务的附件列表
        async getServiceTaskFileList(){
            let targetId = this.selectObj.id
            let result = await getServiceTaskFileListApi({targetId})
            if(result.code==200){
                // console.log(result.rows,'获取当前选择的这个任务的附件列表');
                this.fList = result.rows
            }
        },

        //打开窗口的回调
        openDrawer(){
            this.fileListShow = true
            this.getServiceTaskFileList() // 获取当前选择的这个任务的附件列表
        },

        // 关闭窗口的回调
        closeDrawer(){
            this.checkList = []
            this.fileListShow = false
        },

        // 如果全选了
        isAllChange(e){
            if(e){
                // 是全选
                this.checkList = this.fList
            }else{
                // 不是全选
                this.checkList = []
            }
        },

        // 点击下载附件
        batchDown(){
            if(!this.checkList.length){
                this.$message({message: '请选择文件',type: 'warning'});
                return
            }

            this.checkList.forEach(item => {
                this.downloadFile(item.url)
            })
        },

        // 下载文件的方法
        downloadFile(url){
            const iframe = document.createElement("iframe");
            iframe.style.display = "none";  // 防止影响页面
            iframe.style.height = 0;  // 防止影响页面
            iframe.src = url;
            document.body.appendChild(iframe);
            setTimeout(()=>{
                iframe.remove();
            }, 5 * 60 * 1000);
        },
    },
}
</script>

<style lang="scss" scoped>
.fList{
    padding: 0 20px;
    margin-bottom: 60px;
}

.el-checkbox-group{
    .el-checkbox{
        display: flex;
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid #efefef;
        &:first-child{
            padding-top: 0;
        }
        ::v-deep .el-checkbox__label{
            width: calc(100% - 20px);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            font-size: 14px;
            color: #666;
            p{
                width: calc(100% - 20px);
                font-size: 14px;
                color: #666;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow:ellipsis;
            }
        }
    }
}
</style>

<style scoped>
/* 抽屉样式 */
::v-deep .el-drawer__header {
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
::v-deep .el-drawer__header > span {
  font-size: 18px;
  font-weight: 400;
  color: #2e3f5e;
  padding-left: 20px;
  background: url("~@/wss/assets/image/icon/cardLeft.png") left center no-repeat;
  background-size: 7px;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px !important;
  /* z-index: 10002!important; */
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 10px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
</style>